<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的购物车-小米商城</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			ul li {
				list-style-type: none;
			}
			
			a {
				text-decoration: none;
				color: #333;
			}
			/*网页头部*/
			
			.header {
				position: relative;
				border: 1px solid white;
				width: 100%;
				height: 102px;
				border-bottom-color: #FF6700;
				border-bottom-width: medium;
			}
			
			.header .header-pic {
				position: absolute;
				left: 60px;
				top: 25px;
				width: 48px;
				height: 48px;
				background-color: #FF6700;
				cursor: pointer;
			}
			
			.header .header-pic:hover .header-logo {
				display: none;
			}
			
			.header .header-pic:hover .header-home {
				display: block;
			}
			
			.header .header-pic .header-logo {
				display: block;
			}
			
			.header .header-pic .header-home {
				display: none;
			}
			
			.header .header-title h2 {
				line-height: 48px;
				position: absolute;
				left: 150px;
				top: 30px;
			}
			
			.header .header-title p {
				position: absolute;
				left: 300px;
				top: 50px;
				font-size: 12px;
				color: #757575;
			}
			
			.header .a1 {
				position: absolute;
				right: 60px;
				top: 50px;
				font-size: 12px;
				color: #757575;
				text-decoration: none;
			}
			
			.header .a2 {
				position: absolute;
				right: 100px;
				top: 50px;
				font-size: 12px;
				color: #757575;
				text-decoration: none;
			}
			/*网页主体*/
			
			#main-page {
				width: 100%;
				height: 1528px;
				min-height: 1568px;
				background-color: #F5F5F5;
			}
			
			#main-page #content {
				width: 1226px;
				margin: 0 auto;
				position: relative;
				top: 40px;
				text-align: center;
			}
			
			#list-header {
				width: 1226px;
				height: 70px;
				line-height: 70px;
				background-color: white;
				border-bottom: 1px solid #E0E0E0;
			}
			
			#main-page #content .check {
				width: 110px;
				height: 117px;
				float: left;
			}
			
			#content .check em {
				cursor: pointer;
				font-style: normal;
				display: inline-block;
				width: 18px;
				height: 18px;
				border: 1px solid #d0f0f0;
			}
			
			.hover {
				background: url(img/select.hover.png);
			}
			
			.active {
				background: url(img/select.active.png);
			}
			
			#content .gw-img {
				width: 120px;
				height: 117px;
				float: left;
			}
			
			#content .name {
				width: 380px;
				height: 117px;
				float: left;
			}
			
			#content .name a {
				color: black;
			}
			
			#content .price {
				width: 159px;
				height: 117px;
				float: left;
			}
			
			#content .num {
				width: 150px;
				height: 117px;
				float: left;
			}
			
			#content .total {
				width: 201px;
				height: 117px;
				float: left;
				color: red;
			}
			
			#content #xiaoji {
				color: black;
			}
			
			#content .action {
				width: 80px;
				height: 117px;
				float: left;
			}
			
			#content #list-body {
				width: 1226px;
				height: auto;
				background-color: white;
			}
			/*行*/
			
			#list-body .item-box {
				width: 1226px;
				height: 117px;
				line-height: 117px;
				background-color: white;
				margin: 0 auto;
				vertical-align: middle;
				position: relative;
				border-top-color: gray;
				border-bottom: 1px solid #E0E0E0;
				font-size: 16px;
			}
			
			#list-body .item-box .num .number {
				width: 148px;
				height: 38px;
				border: 1px solid #e0e0e0;
				position: absolute;
				top: 39px;
			}
			
			.item-box .num .number input {
				width: 72px;
				height: 34px;
				line-height: 36px;
				border: 0;
				float: left;
				font-size: 20px;
				text-align: center;
			}
			
			.item-box .num .number .button {
				width: 38px;
				height: 38px;
				float: left;
				background-color: white;
				cursor: pointer;
			}
			
			.item-box .num .number .button:hover {
				background-color: #E0E0E0;
				border: 0;
			}
			
			.item-box .action .del {
				width: 26px;
				height: 26px;
				background-color: white;
				outline: none;
				border: 0;
			}
			/*删除*/
			
			.item-box .action .del:hover {
				background-color: #E53935;
				border-radius: 50%;
				color: white;
				cursor: pointer;
			}
			/*添加行*/
			
			#content #raise-list-box {
				width: 1226px;
				height: 258px;
				margin: 20px 0;
			}
			
			#raise-list-box .raiseItem {
				width: 1206px;
				height: 50px;
				cursor: pointer;
				line-height: 50px;
				text-align: left;
				padding-left: 20px;
				background-color: white;
				border-bottom: 1px solid #E0E0E0;
			}
			
			#raise-list-box .raiseItem:hover {
				background-color: #FAFAFA;
			}
			
			#raise-list-box .raiseItem i {
				font-style: normal;
				width: 22px;
				height: 22px;
				line-height: 22px;
				font-size: 22px;
				display: inline-block;
				background-color: #FF6700;
				border-radius: 50%;
				color: white;
				margin-right: 15px;
				text-align: center;
			}
			/*模态框 */
			
			#modal-box1,
			#modal-box2,
			#modal-box3,
			#modal-box4,
			#modal-box5 {
				width: 100%;
				height: 100%;
				background-color: rgba(10, 10, 10, 0.8);
				position: fixed;
				z-index: 1;
				display: none;
			}
			
			#modal-box1 .modal-header {
				width: 1226px;
				height: 40px;
				/*border: 1px solid;*/
				margin: 50px auto;
				text-align: center;
			}
			
			#modal-box1 .modal-header h2 {
				color: white;
				font-size: 28px;
				font-weight: 400;
			}
			/*关闭模态框*/
			
			#modal-box1 .modal-header .icon {
				position: absolute;
				right: 70px;
				width: 29px;
				height: 29px;
				line-height: 29px;
				display: inline-block;
				border-radius: 50%;
				background-color: white;
				color: #757575;
				font-style: normal;
				font-weight: 200;
				font-size: 20px;
				cursor: pointer;
			}
			
			#modal-box1 .modal-header .icon:hover {
				background-color: #E53935;
				border-radius: 50%;
				color: white;
				cursor: pointer;
			}
			
			#modal-box1 .modal-body {
				width: 1226px;
				height: 360px;
				/*border: 1px solid;*/
				margin: 0 auto;
			}
			
			#modal-box1 .modal-body .modal-list {
				margin: 0 auto;
				width: 995px;
			}
			
			#modal-box1 .modal-body .modal-list li {
				float: left;
				height: 300px;
				width: 234px;
				text-align: center;
				cursor: pointer;
				color: #424242;
				position: relative;
				list-style: none;
				background-color: #fff;
				margin-left: 14px;
				font-size: 14px;
			}
			
			#modal-box1 .modal-body .modal-list li:hover .modal-header .icon {
				background-color: #E0E0E0;
			}
			
			#modal-box1 .modal-body .modal-list li img {
				display: block;
				width: 160px;
				height: 160px;
				margin: 40px auto 15px;
			}
			/*模态框选择按钮*/
			
			#modal-box1 .modal-body .modal-list li .circle1 {
				width: 20px;
				height: 20px;
				line-height: 20px;
				border: 1px solid #B0B0B0;
				border-radius: 50%;
				text-align: center;
				position: absolute;
				left: 15px;
				top: 15px;
			}
			
			#modal-box1 .modal-body .modal-list li .circle2 {
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: white;
			}
			
			#modal-box1 .modal-body .modal-list li:hover .circle2 {
				background-color: #E0E0E0;
			}
			
			#modal-box1 .modal-footer {
				width: 1226px;
				height: 50px;
				margin: 0 auto;
				position: relative;
			}
			/*模态框-加入购物车*/
			
			#modal-box1 .modal-footer .modal-add,
			#modal-box1 .modal-footer .modal-add1 {
				width: 160px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border: 1px solid #B0B0B0;
				background-color: #AFAFAF;
				color: white;
				margin: 0 auto;
				cursor: pointer;
			}
			
			#modal-box1 .modal-footer .modal-add1 {
				background-color: #FF6700;
				border-color: #FF6700;
			}
			
			#modal-box1 .modal-footer .modal-add1:hover {
				background-color: #F25807;
				border-color: #757575;
				color: #fff;
			}
			
			#modal-box1 .modal-footer .modal-add:hover {
				background-color: #757575;
				border-color: #757575;
				color: #fff;
			}
			
			#content #list-footer {
				width: 1226px;
				height: 50px;
				line-height: 50px;
				background-color: white;
				position: relative;
			}
			
			#list-footer .footer-left {
				float: left;
			}
			
			#list-footer .footer-left #cartTotalNum {
				color: #FF6700;
			}
			
			#list-footer .footer-left #sellTotalNum {
				color: #FF6700;
			}
			
			#list-footer .footer-left a {
				color: #757575;
				margin-left: 32px;
			}
			
			#list-footer .footer-left a:hover {
				color: #FF6700;
			}
			
			#list-footer .footer-left span {
				color: #757575;
				margin-left: 16px;
				padding-left: 16px;
			}
			
			#list-footer .footer-left span i {
				font-style: normal;
			}
			
			#list-footer .footer-right {
				float: right;
				width: 475px;
			}
			
			#list-footer .footer-right .cartTotalPrice {
				color: #FF6700;
				float: left;
			}
			
			#list-footer .footer-right .cartTotalPrice #all {
				font-style: normal;
				font-size: 30px;
			}
			/*去结算*/
			
			#list-footer .footer-right .goCheckout {
				background-color: #FF6700;
				color: white;
				width: 202px;
				height: 50px;
				font-size: 18px;
				font-weight: bold;
				display: block;
				text-decoration: none;
				cursor: pointer;
				float: right;
			}
			
			#list-footer .footer-right .goCheckout:hover {
				background-color: #f25807;
				border-color: #f25807;
				color: #fff;
			}
			/*去结算的选择提示*/
			
			#list-footer #select-tips {
				width: 200px;
				height: 48px;
				line-height: 48px;
				border: 1px solid;
				position: absolute;
				top: -55px;
				right: 0px;
				background-color: #fff;
				border: 1px solid #ff6700;
				color: #ff6700;
			}
			/*买购物车中商品的人还买了*/
			
			#main-page #recommend {
				width: 1226px;
				height: 710px;
				border-top-color: #757575;
				margin: 0 auto;
				margin: 60px 0 0;
			}
			
			#recommend .remcommend-title {
				height: 50px;
				font-size: 30px;
				font-weight: 400;
				color: #757575;
				position: relative;
				border-top: 1px solid #E0E0E0;
				margin: 0;
			}
			
			#recommend span {
				text-align: center;
				position: absolute;
				top: -20px;
				left: 372px;
				height: 40px;
				width: 482px;
				line-height: 40px;
				background-color: #F5F5F5;
				display: block;
			}
			
			#recommend .recommend-main {
				width: 1226px;
				height: 628px;
				font-size: 16px;
			}
			
			#recommend .recommend-main ul li {
				float: left;
				margin-left: 14px;
				margin-bottom: 14px;
			}
			
			#recommend .recommend-main dl {
				width: 234px;
				height: 280px;
				padding-left: 20px;
			}
			
			#recommend .recommend-main dt {
				width: 194px;
				height: 200px;
			}
			
			#recommend .recommend-main dd {
				width: 194px;
				height: 21px;
			}
			
			.recommend-main .rem .rem_img img {
				width: 140px;
				height: 140px;
				border: 0;
				margin-top: 20px;
			}
			
			.recommend-main .rem .rem_name {
				width: 194px;
				height: 16px;
				color: #333333;
				margin-bottom: 10px;
			}
			
			.recommend-main .rem .rem_price {
				color: #FF6700;
				margin-bottom: 10px;
			}
			
			.recommend-main .rem {
				width: 234px;
				height: 300px;
				text-align: center;
				background-color: white;
			}
			
			#recommend .recommend-main .rem:hover .addcart {
				display: block;
			}
			
			.recommend-main .rem .rem_opinion {
				position: relative;
			}
			
			.recommend-main .rem .rem_opinion .addcart {
				width: 120px;
				height: 28px;
				line-height: 28px;
				position: absolute;
				left: 37px;
				top: 0;
				color: #FF6700;
				background-color: white;
				border: 1px solid #FF6700;
				font-size: 12px;
				cursor: pointer;
				display: none;
			}
			
			.rem .rem_opinion .addcart:hover {
				color: white;
				background-color: #FF6700;
				border: 1px solid #FF6700;
			}
			
			#footer {
				width: 1349px;
				height: 438px;
				padding-left: 61px;
			}
			
			#footer .footer-service {
				width: 1226px;
				height: 26px;
				padding: 27px 0;
				border-bottom: 1px solid #e0e0e0;
			}
			
			#footer .footer-service .service-list li {
				list-style: none;
				float: left;
				width: 242px;
				height: 25px;
				border-left: 1px solid #e0e0e0;
				font-size: 16px;
				line-height: 25px;
				text-align: center;
			}
			
			#footer .footer-service .service-list li a:hover {
				color: #FF6700;
			}
			
			#footer .footer-links {
				width: 1226px;
				height: 112px;
				padding: 40px 0;
			}
			
			#footer .footer-links dl {
				float: left;
				width: 160px;
				height: 112px;
				margin: 0;
			}
			
			#footer .footer-links dt {
				font-size: 14px;
				color: #424242;
				height: 28px;
			}
			
			#footer .footer-links dl dd {
				height: 28px;
				line-height: 28px;
				font-size: 12px;
				color: #424242;
			}
			
			#footer .footer-links dl dd a:hover {
				color: #FF6700;
			}
			
			#footer .footer-links .contact {
				width: 252px;
				height: 118px;
				float: right;
				border-left: 1px solid #e0e0e0;
				text-align: center;
				color: #616161;
			}
			
			#footer .footer-links .contact .phone {
				font-size: 22px;
				line-height: 1;
				color: #FF6700;
				margin-bottom: 5px;
			}
			
			#footer .footer-links .contact .time {
				font-size: 12px;
				margin-bottom: 18px;
			}
			
			#footer .footer-links .contact .kefu {
				border: 1px solid;
				border-color: #FF6700;
				color: #FF6700;
				background-color: white;
				font-size: 12px;
				width: 120px;
				height: 30px;
				line-height: 30px;
				display: block;
				margin-left: 65px;
			}
			
			#footer .footer-links .contact .kefu:hover {
				border-color: #FF6700;
				color: white;
				background-color: #FF6700;
			}
			
			#footer .footer-infor {
				width: 1226px;
				height: 106px;
				padding: 30px 0;
				background-color: #FAFAFA;
			}
			
			#footer .footer-infor .footer-logo {
				width: 57px;
				height: 57px;
				float: left;
				margin-right: 10px;
			}
			
			#footer .footer-infor .infor-text {
				float: left;
				color: #B0B0B0;
				width: 720px;
				height: 54px;
				font-size: 12px;
			}
			
			#footer .footer-infor .infor-text .sep {
				color: #B0B0B0;
			}
			
			#footer .footer-infor .infor-link img {
				height: 28px;
				margin-left: 7px;
			}
			
			.modal-del {
				width: 100%;
				height: 100%;
				background-color: rgba(10, 10, 10, 0.8);
				position: fixed;
				z-index: 1000;
				display: none;
			}
			
			.del-wrap {
				position: absolute;
				top: 118px;
				left: 400px;
				display: block;
				background: white;
			}
			
			.del-body {
				width: 380px;
				height: 170px;
				padding: 60px 60px 40px;
				text-align: center;
				position: relative;
				max-height: 400px;
			}
			
			.close {
				position: absolute;
				top: 10px;
				right: 10px;
				width: 24px;
				height: 24px;
				line-height: 24px;
				color: #b0b0b0;
				border-radius: 50%;
				z-index: 100;
				text-align: center;
				font-weight: bold;
			}
			
			.close:hover {
				background-color: #E53935;
				border-radius: 50%;
				color: white;
				cursor: pointer;
			}
			
			.del-text {
				min-height: 130px;
				text-align: center;
			}
			
			.del-text h3 {
				margin: 0;
				font-size: 30px;
				font-weight: 400;
				line-height: 50px;
				color: #424242;
			}
			
			.del-btn button {
				margin: 0 7px;
				width: 160px;
				height: 40px;
				display: inline-block;
				font-size: 14px;
				line-height: 38px;
				text-align: center;
				cursor: pointer;
				border: none;
			}
			
			#clear {
				background: #b0b0b0;
				border-color: #b0b0b0;
				color: #fff;
			}
			
			#ok {
				background: #ff6700;
				border-color: #ff6700;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div class="modal-del">
			<div class="del-wrap">
				<span class="close">X</span>
				<div class="del-body">
					<div class="del-text">
						<h3>确定删除吗？</h3>
					</div>
					<div class="del-btn">
						<button id="clear">取消</button>
						<button id="ok">确定</button>
					</div>
				</div>
			</div>
		</div>
		<div id="modal-box1">
			<div class="modal-header">
				<span class="close"><i class="icon">X</i></span>
				<h2>选择产品</h2>
			</div>
			<div class="modal-body">
				<ul class="modal-list">
					<li onclick="activeli(this)">
						<img src="img/m-g-4.jpg" />
						<p>小米活塞耳机 清新版 黑色</p>
						<p>25元</p>
						<p class="circle1"><span class="circle2"></span></p>
					</li>
					<li onclick="activeli(this)">
						<img src="img/m-g-1.jpg" />
						<p>小米活塞耳机 清新版 银色</p>
						<p>25元</p>
						<p class="circle1"><span class="circle2"></span></p>
					</li>
					<li onclick="activeli(this)">
						<img src="img/m-g-2.jpg" />
						<p>小米活塞耳机 清新版 粉色</p>
						<p>25元</p>
						<p class="circle1"><span class="circle2"></span></p>
					</li>
					<li onclick="activeli(this)">
						<img src="img/m-g-3.jpg" />
						<p>小米活塞耳机 清新版 紫色</p>
						<p>25元</p>
						<p class="circle1"><span class="circle2"></span></p>
					</li>
				</ul>
			</div>
			<div class="modal-footer">
				<div class="modal-add" onclick="btnadd(this)">
					加入购物车
				</div>
			</div>
		</div>
		<div id="modal-box2">

		</div>
		<div id="modal-box3">

		</div>
		<div id="modal-box4">

		</div>
		<div id="modal-box5">

		</div>
		<div class="header">
			<div class="header-pic">
				<div class="header-logo">
					<img src="img/mi-logo.png" />
				</div>
				<div class="header-home">
					<img src="img/mi-home.png" />
				</div>
			</div>
			<div class="header-title">
				<h2>我的购物车</h2>
				<p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
			</div>
			<a href="mi.login.html" class="a1">登录</a>
			<a href="mi.register.html" class="a2">注册</a>
		</div>
		<div id="main-page">
			<div id="content">
				<div id="list-header">
					<div class="check" style="height: 70px;">
						<em id="quanxuan"></em>全选
					</div>
					<div class="gw-img" style="height: 70px;">

					</div>
					<div class="name" style="height: 70px;">
						商品名称
					</div>
					<div class="price" style="height: 70px;">
						单价
					</div>
					<div class="num" style="height: 70px;">
						数量
					</div>
					<div class="total" style="height: 70px;" id="xiaoji">
						小计
					</div>
					<div class="action" style="height: 70px;">
						操作
					</div>
				</div>
				<div id="list-body">
					<div class="item-box">
						<div class="check">
							<em></em>
						</div>
						<div class="gw-img">
							<img src="img/gw1.jpg" />
						</div>
						<div class="name">
							<a href="#">小米笔记本Air 12 M3 4G 256G 银色</a>
						</div>
						<div class="price">
							3999元
						</div>
						<div class="num">
							<div class="number">
								<input type="button" id="" value="-" class="button" onclick="jian(this.parentNode.children[1])" />
								<input type="text" id="" value="1" size="1" onchange="xiaoji(this)" />
								<input type="button" id="" value="+" class="button" onclick="jia(this.parentNode.children[1])" />
							</div>
						</div>
						<div class="total">
							3999元
						</div>
						<div class="action">
							<input type="button" id="" value="X" onclick="del(this.parentNode.parentNode)" class="del" />
						</div>
					</div>
					<div class="item-box">
						<div class="check">
							<em></em>
						</div>
						<div class="gw-img">
							<img src="img/gw2.jpg" />
						</div>
						<div class="name">
							<a href="#">小米平板3 香槟金 64GB</a>
						</div>
						<div class="price">
							2300元
						</div>
						<div class="num">
							<div class="number">
								<input type="button" id="" value="-" class="button" onclick="jian(this.parentNode.children[1])" />
								<input type="text" id="" value="1" size="1" onchange="xiaoji(this)" />
								<input type="button" id="" value="+" class="button" onclick="jia(this.parentNode.children[1])" />
							</div>
						</div>
						<div class="total">
							2300元
						</div>
						<div class="action">
							<input type="button" id="" value="X" onclick="del(this.parentNode.parentNode)" class="del" />
						</div>
					</div>
					<div class="item-box">
						<div class="check">
							<em></em>
						</div>
						<div class="gw-img">
							<img src="img/gw5.jpg" />
						</div>
						<div class="name">
							<a href="#">ZMI 10号移动电源 锖色</a>
						</div>
						<div class="price">
							299元
						</div>
						<div class="num">
							<div class="number">
								<input type="button" id="" value="-" class="button" onclick="jian(this.parentNode.children[1])" />
								<input type="text" id="" value="1" size="1" onchange="xiaoji(this)" />
								<input type="button" id="" value="+" class="button" onclick="jia(this.parentNode.children[1])" />
							</div>
						</div>
						<div class="total">
							299元
						</div>
						<div class="action">
							<input type="button" id="" value="X" onclick="del(this.parentNode.parentNode)" class="del" />
						</div>
					</div>
				</div>
				<div id="raise-list-box">
					<div class="raiseItem" onclick="showsg1()">
						<i>+</i>+25元得小米活塞耳机 清新版 25元
					</div>
					<div class="raiseItem" onclick="showsg2()">
						<i>+</i>米家随身风扇 14.9元
					</div>
					<div class="raiseItem" onclick="showsg3()">
						<i>+</i>最生活毛巾青春系列 18元
					</div>
					<div class="raiseItem" onclick="showsg4()">
						<i>+</i>+39元得小米自拍杆（线控版） 39元
					</div>
					<div class="raiseItem" onclick="showsg5()">
						<i>+</i>米家LED随身灯 14.9元
					</div>
				</div>
				<div id="list-footer">
					<div class="footer-left">
						<a href="mi.firstpage.html" class="back-shoping">继续购物</a>
						<span>共<i id="cartTotalNum">0</i>件商品，已选择<i id="sellTotalNum">0</i>件</span>
					</div>
					<div class="footer-right">
						<span class="cartTotalPrice">合计（不含运费）：<i id="all">00.00</i>元</span>
						<a href="#" class="goCheckout">去结算</a>
					</div>
					<div id="select-tips">请勾选需要结算的商品</div>
				</div>
				<div id="recommend">
					<h2 class="remcommend-title"><span>买购物车中商品的人还买了</span></h2>
					<div class="recommend-main">
						<ul>
							<li class="rem" style="margin-left: 0;">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem1.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米笔记本Air 12 15 8G </a>
									</dd>
									<dd class="rem_price">4999元</dd>
									<dd class="rem_opinion">170人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem2.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米笔记本Air 12 M3 4G</a>
									</dd>
									<dd class="rem_price">3599元</dd>
									<dd class="rem_opinion">912人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem3.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米笔记本内胆包 </a>
									</dd>
									<dd class="rem_price">69元</dd>
									<dd class="rem_opinion">1570人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem4.png"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米无线鼠标</a>
									</dd>
									<dd class="rem_price">69元</dd>
									<dd class="rem_opinion">2676人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem5.png"/></a></dt>
									<dd class="rem_name">
										<a href="#">悦米机械键盘</a>
									</dd>
									<dd class="rem_price">279元</dd>
									<dd class="rem_opinion">740人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem" style="margin-left: 0;">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem11.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米电视4A 32英寸</a>
									</dd>
									<dd class="rem_price">109元</dd>
									<dd class="rem_opinion">865人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem8.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米圈铁耳机</a>
									</dd>
									<dd class="rem_price">89元</dd>
									<dd class="rem_opinion">4.1万人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem12.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米笔记本贴纸 12.5英寸</a>
									</dd>
									<dd class="rem_price">64.9元</dd>
									<dd class="rem_opinion">209人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem13.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">USB-C至Mini DisplayPort</a>
									</dd>
									<dd class="rem_price">149元</dd>
									<dd class="rem_opinion">166人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
							<li class="rem">
								<dl>
									<dt class="rem_img"><a href="#"><img src="img/rem14.jpg"/></a></dt>
									<dd class="rem_name">
										<a href="#">小米随身WIFI</a>
									</dd>
									<dd class="rem_price">19.9元</dd>
									<dd class="rem_opinion">30.1万人好评
										<div class="addcart" onclick="add(this.parentNode.parentNode.parentNode)">加入购物车</div>
									</dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div class="footer-service">
				<ul class="service-list">
					<li>
						<a href="#">预约维修服务</a>
					</li>
					<li>
						<a href="#">7天无理由退货</a>
					</li>
					<li>
						<a href="#">15天免费换货</a>
					</li>
					<li>
						<a href="#">满150包邮</a>
					</li>
					<li>
						<a href="#">520余家售后网点</a>
					</li>

				</ul>
			</div>
			<div class="footer-links">
				<dl><dt><a href="#">帮助中心</a></dt>
					<dd>
						<a href="#">账户管理</a>
					</dd>
					<dd>
						<a href="#">购物指南</a>
					</dd>
					<dd>
						<a href="#">订单操作</a>
					</dd>
				</dl>
				<dl><dt><a href="#">服务支持</a></dt>
					<dd>
						<a href="#">售后政策</a>
					</dd>
					<dd>
						<a href="#">自助服务</a>
					</dd>
					<dd>
						<a href="#">相关下载</a>
					</dd>
				</dl>
				<dl><dt><a href="#">线下门店</a></dt>
					<dd>
						<a href="#">小米之家</a>
					</dd>
					<dd>
						<a href="#">服务网点</a>
					</dd>
					<dd>
						<a href="#">零售网点</a>
					</dd>
				</dl>
				<dl><dt><a href="#">关于小米</a></dt>
					<dd>
						<a href="#">了解小米</a>
					</dd>
					<dd>
						<a href="#">加入小米</a>
					</dd>
					<dd>
						<a href="#">联系我们</a>
					</dd>
				</dl>
				<dl><dt><a href="#">关注我们</a></dt>
					<dd>
						<a href="#">新浪微博</a>
					</dd>
					<dd>
						<a href="#">小米部落</a>
					</dd>
					<dd>
						<a href="#">官方微信</a>
					</dd>
				</dl>
				<dl><dt><a href="#">特色服务</a></dt>
					<dd>
						<a href="#">F码通道</a>
					</dd>
					<dd>
						<a href="#">礼物码</a>
					</dd>
					<dd>
						<a href="#">防伪查询</a>
					</dd>
				</dl>
				<div class="contact">
					<p class="phone">400-100-5678</p>
					<p class="time">周一至周日 8:00-18:00<br/>（仅收市话费） </p>
					<a href="#" class="kefu">24小时在线客服</a>
				</div>
			</div>
			<div class="footer-infor">
				<div class="footer-logo">
					<img src="img/logo.png" />
				</div>
				<div class="infor-text">
					<p>
						<a href="#">小米商城</a><span class="sep">|</span>
						<a href="#">MIUI</a><span class="sep">|</span>
						<a href="#">米聊 </a><span class="sep">|</span>
						<a href="#">多看书城 </a><span class="sep">|</span>
						<a href="#">小米路由器 </a><span class="sep">|</span>
						<a href="#">视频电话</a><span class="sep">|</span>
						<a href="#">小米淘宝直营店</a><span class="sep">|</span>
						<a href="#">小米天猫店</a><span class="sep">|</span>
						<a href="#">小米网盟 </a><span class="sep">|</span>
						<a href="#">小米移动</a><span class="sep">|</span>
						<a href="#">隐私政策</a><span class="sep">|</span>
						<a href="#">Select Region</a>
					</p>
					<p class="">©
						<a href="#">mi.com</a>京ICP证110507号
						<a href="#">京ICP备10046444号</a>
						<a href="#">京公网安备11010802020134号</a>
						<a href="#">京网文[2014]0059-0009号</a><br /> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </p>
				</div>
				<div class="infor-link">
					<img src="img/page-footer1.png" />
					<img src="img/page-footer2.png" />
					<img src="img/page-footer3.png" />
					<img src="img/page-footer4.png" />
				</div>
			</div>
		</div>

		<script type="text/javascript">
			function xuanze() {
				var spans = document.getElementsByTagName("em");
				for(var i = 0; i < spans.length; i++) {
					spans[i].onmouseover = function() {
						if(this.className != "active") {
							this.className = "hover";
						}
					}
					spans[i].onmouseout = function() {
						if(this.className != "active") {
							this.className = "";
						}
					}
					spans[i].onclick = function() {
						this.className = this.className != "active" ? "active" : "";
						funSum();
					}
				}
			}
			var tbo = document.getElementById("list-body");
			xuanze();
			//模态框
			function showsg1() {
				var mod = document.getElementById("modal-box1");
				mod.style.display = "block";
				mod.firstElementChild.firstElementChild.firstElementChild.onclick = function() {
					mod.style.display = "none";
				}
			}

			function showsg2() {
				var mod = document.getElementById("modal-box2");
				mod.style.display = "block";
				mod.firstElementChild.firstElementChild.firstElementChild.onclick = function() {
					mod.style.display = "none";
				}
			}

			function showsg3() {
				var mod = document.getElementById("modal-box3");
				mod.style.display = "block";
				mod.firstElementChild.firstElementChild.firstElementChild.onclick = function() {
					mod.style.display = "none";
				}
			}

			function showsg4() {
				var mod = document.getElementById("modal-box4");
				mod.style.display = "block";
				mod.firstElementChild.firstElementChild.firstElementChild.onclick = function() {
					mod.style.display = "none";
				}
			}

			function showsg5() {
				var mod = document.getElementById("modal-box5");
				mod.style.display = "block";
				mod.firstElementChild.firstElementChild.firstElementChild.onclick = function() {
					mod.style.display = "none";
				}
			}
			//模态框按钮
			function activeli(t) {
				var lis = t.parentNode.children;
				//			console.log(lis);
				//			console.log(t.children[3].children[0]);
				for(var i = 0; i < lis.length; i++) {
					lis[i].children[3].children[0].style.backgroundColor = "white";
					lis[i].children[3].style.borderColor = "#e0e0e0";
				}
				t.children[3].children[0].style.backgroundColor = "#FF6700";
				t.children[3].style.borderColor = "#FF6700"
				var btn = document.querySelector(".modal-add");
				btn.className = "modal-add1";

			}
			//模态框中的商品加入购物车
			function btnadd(t) {
				var lis = t.parentNode.parentNode.children[1].firstElementChild.children;
				for(var i = 0; i < lis.length; i++) {
					if(lis[i].children[3].children[0].style.backgroundColor != "white") {

						var div = document.createElement("div");
						div.className = "item-box";
						div.innerHTML += "<div class='check'><em></em></div>";
						div.innerHTML += "<div class='gw-img'><img src=" + lis[i].children[0].src + " width=80px /></div>";
						div.innerHTML += "<div class='name'>" + lis[i].children[1].innerHTML + "</div>";
						div.innerHTML += "<div class='price'>" + lis[i].children[2].innerHTML + "</div>";
						div.innerHTML += "<div class='num'><div class='number'><input type='button'  value='-' class='button' onclick='jian(this.parentNode.children[1])' /><input type='text'  value='1' size='1' onchange='xiaoji(this)' /><input type='button'  value='+' class='button' onclick='jia(this.parentNode.children[1])' /></div></div>";
						div.innerHTML += "<div class='total'>" + lis[i].children[2].innerHTML + "</div>";
						div.innerHTML += "<div class='action'><input type='button' value='X' onclick='del(this.parentNode.parentNode)' class='del' /></div>";
						tbo.appendChild(div);
						xuanze();
						t.parentNode.parentNode.style.display = "none";
						break;
					}
					//				console.log(lis[i].children[3].children[0].style.backgroundColor);
				}

			}

			// 全选

			document.getElementById("quanxuan").addEventListener("click", function() {
				var spans = document.getElementsByTagName("em");

				for(var i = 1; i < spans.length; i++) {
					spans[i].className = spans[0].className;
				}
				funSum();
			});

			//添加

			function add(t) {
				var div = document.createElement("div");
				div.className = "item-box";
				div.innerHTML = "<div class='check'><em></em></div>";
				div.innerHTML += "<div class='gw-img'><img src=" + t.firstElementChild.firstElementChild.firstElementChild.children[0].src + " width=80px /></div>";
				div.innerHTML += "<div class='name'>" + t.firstElementChild.children[1].firstElementChild.innerHTML + "</div>";
				div.innerHTML += "<div class='price'>" + t.firstElementChild.children[2].innerHTML + "</div>";
				div.innerHTML += "<div class='num'><div class='number'><input type='button'  value='-' class='button' onclick='jian(this.parentNode.children[1])' /><input type='text'  value='1' size='1' onchange='xiaoji(this)' /><input type='button'  value='+' class='button' onclick='jia(this.parentNode.children[1])' /></div></div>";
				div.innerHTML += "<div class='total'>" + t.firstElementChild.children[2].innerHTML + "</div>";
				div.innerHTML += "<div class='action'><input type='button' value='X' onclick='del(this.parentNode.parentNode)' class='del' /></div>";
				tbo.appendChild(div);
				console.log(1);
				xuanze();
			}
			//小计
			function xiaoji(t) {
				var price = parseFloat(t.parentNode.parentNode.parentNode.children[3].innerHTML);
				var num = t.parentNode.children[1].value;
				var sum = price * num;
				t.parentNode.parentNode.parentNode.children[5].innerHTML = sum + "元";
				funSum()
			}

			//总计(件数)
			function funSum() {
				var sum = 0;
				var sells = 0;
				var cartNum = 0;
				var divs = tbo.children;
				console.log(divs);
				for(var i = 0; i < divs.length; i++) {
					if(divs[i].firstElementChild.firstElementChild.className == "active") {
						sum += parseInt(divs[i].children[5].innerHTML);
						sells += parseInt(divs[i].children[4].firstElementChild.children[1].value);
					}
					console.log("yes");

					cartNum += parseInt(divs[i].children[4].firstElementChild.children[1].value);
				}
				document.getElementById("all").innerHTML = sum.toFixed(2);
				document.getElementById("sellTotalNum").innerHTML = sells;
				document.getElementById("cartTotalNum").innerHTML = cartNum;

				console.log(sum);

			}

			//加减
			function jian(t) {
				if(t.value <= 1) {
					t.value = 1;
				} else {
					t.value = t.value - 1;
				}
				xiaoji(t);
			}

			function jia(t) {
				t.value = parseFloat(t.value) + 1;
				xiaoji(t);
			}

			//删除
			function del(t) {
				if(confirm("是否确认删除？")) {
					t.parentNode.removeChild(t);
				}
			}
			var clear = document.getElementById("clear");
			var ok = document.getElementById("ok");
		</script>
	</body>

</html>